<!--区域统计-->
<!DOCTYPE html>
<html>


<head>
    <!--引入公用模板-->
    <%- include ../taglib/layout-report.ejs %>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" style="padding:5px">
    <div class="row animated fadeInDown">
        <div class="col-sm-3" id="mapleft">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备数据</h5>
                </div>
                <div class="ibox-content">
                    <div class="row  pre-scrollable">
                        <div id='external-events'>
                            <ul id="kindTree" class="ztree">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 clearfix" id="mapright" style="padding-left:5px">
            <div class="row">
                <div class="col-sm-12 " style="padding-left:5px;margin-top: 0px;margin-bottom: 0px">
                    <div class="ibox float-e-margins collapsed ">
                        <div class="ibox-title">
                            <h5>查询条件</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <form role="form" class="form-inline ">

                                    <label class="control-label">时间范围</label>
                                    <input placeholder="开始时间" class="laydate-icon form-control layer-date" id="start">
                                    <input placeholder="结束时间" class="laydate-icon form-control layer-date" id="end">
                                    <button type="button" class="btn btn btn-primary" onclick="setLadayTime(-1)"><i
                                                class="fa fa-search"></i> 昨天
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="setLadayTime(-2)"><i
                                                class="fa fa-search"></i> 近三天
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="setLadayTime(-6)"><i
                                                class="fa fa-search"></i> 近七天
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="query()"><i
                                                class="fa fa-search"></i> 搜索
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="outexcel()"><i
                                                class="fa  fa-file-excel-o"></i> 导出
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row animated fadeInDown">
                <div class="col-sm-12 clearfix" style="padding-left:5px;margin-top: 2px;margin-bottom: 0px">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>区域统计图表</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="flot-chart" style="min-width:400px;height:350px">
                                <div class="flot-chart-content" id="container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 clearfix " style="padding-left:5px;padding-right:1px;margin-top: 0px;margin-bottom: 0px">
                        <div class="ibox float-e-margins collapsed " >
                            <div class="ibox-title">
                                <div>
                                    <h5>
                                        区域统计列表
                                    </h5>
                                </div>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="" id="">
                                    <div>
                                        <table id="example"
                                               class="table table-striped table-bordered table-hover dataTables-example">
                                            <thead>
                                            <tr>
                                                <!--<th>-->
                                                <!--</th>-->
                                                <!--<th>id</th>-->
                                                <th width="200px">车牌号</th>
                                                <th>所属用户</th>
                                                <th>车主姓名</th>
                                                <th>围栏名称</th>
                                                <th>报警类型</th>
                                                <th>报警次数</th>
                                                <th>报警时间</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!--<input type='button' text='dianji' onclick="play_sound()"/>-->
<input type="hidden" id="h_c_car_id">
<input type="hidden" id="h_all_car_id">
<%- include ../taglib/layout-content.ejs %>
<script type="text/javascript">
    var table;

    $(document).ready(function () {
        table = $('.dataTables-example').dataTable({
            "lengthChange": false,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
            "scrollY": true,//dt高度
            scrollX: true,
            "autoWidth": true,//自动宽度
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/report/fencelist",
                "dataSrc": "rows"
            },
            serverSide: true,
            columns: [

//                {"sClass": "text-center", data: 'id',"bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'baseCarNo',"bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'userName', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'fenceName', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: function (e) {//这里给最后一列返回一个操作列表
                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    debugger;
//                    accFlag
//                    1-驶入  2-驶出 3-超速 4-路线偏离 5-停车超时报警  6-疲劳驾驶报警 7-凌晨行车报警
                    var d = e.warningType;
                    var result = '驶入'
//                    车牌号颜色[1-4]黄白蓝黑
                    if (d == 2) {
                        result = '驶出'
                    } else if (d == 3) {
                        result = '超速'
                    } else if (d == 4) {
                        result = '路线偏离'
                    } else if (d == 5) {
                        result = '停车超时'
                    } else if (d == 6) {
                        result = '疲劳驾驶'
                    } else if (d == 7) {
                        result = '凌晨行车'
                    }
                    return result
                },

                    "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'warningNum', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'warningTime', "bSortable": false, "orderable": false}

            ],
            //排序
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(table,0,false)
            },
        });
    });
    //    隐藏列
    function visiblecolumn(table, c, visible) {
        table.DataTable().column(c).visible(visible)
    }
//    /**
//     * 树刷新数据
//     */
//    function query() {
//        search_ztree('kindTree', 'serchStr');
//    }



</script>

<script type="text/javascript">
    $(document).ready(function () {

        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD',
//            min: laydate.now(), //设定最小日期为当前日期
            max: '2999-06-16 23:59:59', //最大日期
//            start: laydate.now(),
//            start: laydate.now() + ' 00:00:00',
            istime: false,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
//            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
//            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD',
//            min: laydate.now(),
            max: '2999-06-16',
//            start: laydate.now() + ' 23:59:59',
            istime: false,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
        $("#start").val(laydate.now());
        $("#end").val(laydate.now());
    })

    function setLadayTime(time) {
        $("#start").val(laydate.now(time) );
        $("#end").val(laydate.now() );

    }
</script>
<script type="text/javascript">
    //    部门车辆树
    var urlTree;
    var map;
    $(function () {
//        urlTree = '/tree/deptCar';
//        init_tree('id', 'parentId', 'name', fnClick);
//        loadMyTree(urlTree);
        var url = '/tree/dept';
        init_tree('id', 'parentId', 'name',  fnClick,"", "");
        loadMyTree(url);
    });
    //    树节点选中
    var fnClick = function (event, treeId, treeNode) {
        selectTreeNode(treeNode);
    }

    //    复选框选中
    function selectTreeNode(treeNode) {
//        var isCar = treeNode.isCar
//        if (isCar) {
//            $("#h_c_car_id").val(treeNode.id);
//        }else{
//            swal("系统提示", "请选择车辆查询!", "warning");
//
//        }
        $("#h_c_car_id").val(treeNode.id);
    }

    //刷新数据
    function query() {
        var carId = $("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        if(!carId){
            swal("系统提示", "请选择客户查询!", "warning");
            return false
        }
        var jsonstr = [{"carId": carId},{"start": start},{"end": end}];
        table.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
        queryChart();
    }

</script>
<script type="text/javascript">
    //    图表
    $(function () {
//        1-驶入  2-驶出 3-超速 4-路线偏离 5-停车超时报警  6-疲劳驾驶报警 7-凌晨行车报警
        var pieData=[
            {name:'非法驶入',   y: 0},
            ['非法驶出',       0],
            ['超速',       0],
            ['路线偏离',       0],
            ['停车超时',       0],
            ['疲劳驾驶',       0],
            ['凌晨行车',       0]
//            {
//                name: '非法驶入-驶出',
//                y: 0,
//                sliced: true,
//                selected: true,
////                    url: 'http://www.hcharts.cn'
//            }
        ];
        drawChartPieBase(pieData);
    });
    function queryChart() {
        var carId = $("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        $.ajax({
            type: "GET",
            url: "/report/fencechart",
            cache: false,
            async: false,
            dataType: "json",
            data: {
                carId: carId,
                start: start,
                end: end
            },
            success: function (data) {
                debugger;
                var pieData=data.pieData
                drawChartPieBase(pieData);
            }
        });
    }
    function drawChartPieBase(pieData) {
        chart = new Highcharts.Chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '车辆区域分析'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '车辆区域统计',
                data:pieData
            }]
        });
    }
    function outexcel() {
        var carId = $("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        var jsonstr = [{"carId": carId},{"start": start},{"end": end}];
        window.open("<%= serverurl%>/report/exportFenceExcel?carId="+carId+"&start="+start+"&end="+end)
    }
</script>
</body>
</html>
